<template>
  <div class="category-tree-wrapper">
    <!-- 分类标题栏 -->
    <div class="category-header">
      <h3 class="category-title">商品分类</h3>
      <div class="category-count">共 {{ getTotalCount(data) }} 个分类</div>
    </div>
    
    <!-- 商品分类树形控件 -->
    <el-tree 
      :data="data" 
      :props="defaultProps" 
      @node-click="handleNodeClick"
      node-key="catId"
      :highlight-current="true"
      :expand-on-click-node="false"
      :default-expand-all="false"
      :indent="16"
      class="custom-category-tree"
    >
      <template #default="{ data }">
        <div class="custom-tree-node-container">
          <!-- 层级指示器 -->
          <div 
            class="level-indicator" 
            :style="{ backgroundColor: getLevelColor(data.catLevel) }"
            :title="`层级: L${data.catLevel}`"
          ></div>
          
          <span class="custom-tree-node">
            <!-- 分类名称 -->
            <span class="tree-node-name">{{ data.name }}</span>
            
            <!-- 分类元信息 -->
            <div class="tree-node-meta">
              <span class="meta-item product-count" v-if="data.productCount">
                <i class="el-icon-shopping-bag"></i> {{ data.productCount }}
              </span>
              <span class="meta-item level-tag">
                L{{ data.catLevel }}
              </span>
            </div>
          </span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { listWithTree } from "@/api/product/category";

export default {
  name: "Category",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 其他数据...
    };
  },
  created() {
    this.list();
  },
  methods: {
    list() {
      listWithTree().then((response) => {
        let rawData = response.rows || [];
        this.data = this.filterTreeByShowStatus(rawData);
      });
    },
    filterTreeByShowStatus(tree) {
      return tree
        .filter(node => node.showStatus === 1)
        .map(node => {
          if (node.children && node.children.length > 0) {
            node.children = this.filterTreeByShowStatus(node.children);
          }
          return node;
        });
    },
    handleNodeClick(data) {
      this.$emit("tree-node-click", data);
    },
    getTotalCount(tree) {
      let count = tree.length;
      tree.forEach(node => {
        if (node.children && node.children.length) {
          count += this.getTotalCount(node.children);
        }
      });
      return count;
    },
    getLevelColor(level) {
      const colors = ['#409eff', '#67c23a', '#faad14'];
      return colors[level - 1] || colors[0];
    }
  }
};
</script>

<style scoped>
.category-tree-wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 16px;
  overflow: hidden;
}

.category-header {
  padding: 14px 20px;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
}

.category-count {
  font-size: 12px;
  color: #86909c;
  background-color: #f7f8fa;
  padding: 2px 8px;
  border-radius: 12px;
}

.custom-category-tree {
  padding: 8px 0;
  --tree-hover-bg: #f5f7fa;
  --tree-active-bg: #e8f3ff;
  --tree-active-color: #1890ff;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

.custom-category-tree .el-tree-node__content {
  display: flex;
  align-items: center; /* 确保所有内容垂直居中 */
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.15s ease;
  min-height: 32px;
}

.custom-category-tree .el-tree-node__content:hover {
  background-color: var(--tree-hover-bg);
}

.custom-category-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: var(--tree-active-bg);
  color: var(--tree-active-color);
}

.custom-category-tree .el-tree-node__expand-icon {
  color: #c9cdD4;
  margin-right: 8px;
  font-size: 14px;
  align-self: center;
}

.custom-category-tree .el-tree-node__expand-icon:hover {
  color: #86909c;
}

.custom-category-tree .el-tree-node__expand-icon.expanded {
  transform: rotate(90deg);
  color: #86909c;
}

.custom-tree-node-container {
  display: flex;
  align-items: center; /* 关键：确保容器内元素垂直居中对齐 */
  width: 100%;
  height: 100%; /* 确保容器高度足够 */
}

.level-indicator {
  width: 3px;
  height: 16px;
  border-radius: 3px;
  margin-right: 8px;
  flex-shrink: 0; /* 防止指示器被压缩 */
}

.custom-tree-node {
  display: flex;
  align-items: center; /* 确保节点内元素垂直居中 */
  width: 100%;
}

.tree-node-name {
  font-size: 14px;
  color: #1d2129;
  flex: 1;
  line-height: 1; /* 重置行高确保对齐 */
}

.tree-node-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0; /* 防止元信息被压缩 */
}

.meta-item {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1; /* 重置行高确保对齐 */
}

.product-count {
  color: #6b7785;
  background-color: #f2f3f5;
}

.product-count i {
  font-size: 11px;
}

.level-tag {
  color: #fff;
  font-weight: 500;
  padding: 1px 5px;
}

.custom-category-tree .el-tree-node__children {
  position: relative;
  padding-left: 16px !important;
}

.custom-category-tree .el-tree-node__children::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #f0f2f5;
}

.custom-category-tree::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-category-tree::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

.custom-category-tree::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.custom-category-tree::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
</style>
